<!DOCTYPE html>
<html>
	<head>
		<title>班组考勤(月汇总)</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body class="Summary">
		<div id="teamAttendanceMonthSummary">
			<div class="title">
				<div class="titleCont">
					<div class="headPortrait">
		  			<img onload="imgClass(event)" :src="headImg?imgUrl+headImg:'image/icon_group_normal.png'"/>
		  		</div>
		  		<div class="text">
		  			<p v-text="projectName"></p>
		  			<span v-text="groupName"></span>
		  		</div>
		  		<div class="time">
		  			选择日期：<span onclick="window.location.href = 'setDateMonth';" v-text="attendDateText"></span>
		  		</div>
				</div>
			</div>
			
			<div v-show="notData">
				<div class="circularBg">
					<div class="circular">
						<p>班组出勤率</p>
						<div v-text="teamData.probability"></div>
					</div>
				</div>
				
				<ul class="attendanceList">
					<li>
						<b>考勤人数</b>
						<span>
							<i v-text="teamData.should"></i>人
						</span>
					</li>
					<li>
						<b>出勤人数</b>
						<span>
							<i v-text="teamData.actual"></i>人
						</span>
					</li>
					<li>
						<b>正常打卡</b>
						<span>
							<i v-text="teamData.normal"></i>人
						</span>
					</li>
					<li>
						<b>异常打卡</b>
						<span>
							<i v-text="teamData.error"></i>人
						</span>
					</li>
					<!--<li>
						<b>早退</b>
						<span>
							<i>{{teamData.leaveEarly}}</i>人
						</span>
					</li>
					<li>
						<b>迟到</b>
						<span>
							<i>{{teamData.late}}</i>人
						</span>
					</li>-->
					<li>
						<b>请假</b>
						<span>
							<i v-text="teamData.leave"></i>人
						</span>
					</li>
					<li>
						<b>未打卡</b>
						<span>
							<i v-text="teamData.notAtten"></i>人
						</span>
					</li>
					<li>
						<b>实到天数</b>
						<span>
							<i v-text="teamData.actualDay"></i>天
						</span>
					</li>
					<li>
						<b>应到考勤天数</b>
						<span>
							<i v-text="teamData.shouldDay"></i>天
						</span>
					</li>
				</ul>
				<h5 style="margin-top: 10px;">班组成员汇总(天)</h5>
				<div class="teamTable">
					<table cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th>姓名</th>
								<th>应到</th>
								<th>出勤</th>
								<th>外勤</th>
								<th>未打卡</th>
								<th>请假</th>
							</tr>
						</thead>
						<tbody v-cloak>
							<tr v-for="list in teamData.workerAttendList">
								<td>{{list.realname}}</td>
								<td>{{list.shouldDay}}</td>
								<td>{{list.actualDay}}</td>
								<td>{{list.out}}</td>
								<td>{{list.missing}}</td>
								<td>{{list.leave}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<script src="js/vue.min.js"></script>
		<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	  <script src="js/axios.min.js"></script>
	  <script src="js/message.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#teamAttendanceMonthSummary",
				data:{
					teamData:{},
					attendDate:'',
					attendDateText:'',
					notData:false,
					//班组、项目名称
					projectName:'',
					groupName:'',
					headImg:''
				},
				methods:{
					query:function(){
						axios.get(url+"/getGroupAttenMonthCount",{
							params:{
								projectId:GetQueryString("projectId"),
								attendDate:this.attendDate,  //2017-06
								groupId:GetQueryString("groupId")
                               /* projectId:GetQueryString("projectId")||"0",
                                attendDate:this.attendDate,  //2017-06
                                groupId:GetQueryString("groupId")||"10639"*/
							},
                            headers:{"token":GetQueryString("token")}
                            //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
						}).then(function(data){
							var oData = data.data.data;
							if (oData) {
								oData.probability = Math.round(oData.actualDay/oData.shouldDay*100)+'%'
								this.teamData = oData;
								this.notData = true
							}else{
								this.notData = false
							}
						}.bind(this))
					},
					setDate:function(date){
						this.attendDate = date;
						this.attendDateText = replaceDate("y-m",date)
						this.query();
					}
				},
				mounted:function(){
			  	this.$nextTick(function(){   // 文档加载后调用
			  		this.headImg = GetQueryString('headImg');
			  		this.projectName = GetQueryString('projectName');
						this.groupName = GetQueryString('groupName');
			  		var today = new Date();   // 获取当前时间
						var time = today.format('yyyy-MM');  //格式化时间
						this.attendDate = time;
						this.attendDateText = replaceDate("y-m")//时间转换为年月日格式
			  		this.query();
					});
			  }
			})
			
		</script>
	</body>
</html>
